<template>
	<div>

		<!-- Form -->
		<el-button type="primary" @click="dialogFormVisible = true">
			open a Form nested Dialog  Math.random
		</el-button>

		<el-dialog v-model="dialogFormVisible" title="Shipping address">
			<el-form :model="form">
				<el-form-item label="Promotion name" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" />
				</el-form-item>
				<el-form-item label="Zones" :label-width="formLabelWidth">
					<el-select v-model="form.region" placeholder="Please select a zone">
						<el-option label="Zone No.1" value="shanghai" />
						<el-option label="Zone No.2" value="beijing" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">Cancel</el-button>
					<el-button type="primary" @click="confirm">
						Confirm
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>  
	
<script>
export default {
	data() {
		return {
			dialogFormVisible: false,
			formLabelWidth: '140px',
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: '',
			},
			cc: '',
			cc2: ''
		}
	},
	methods: {
		confirm() {
			this.dialogFormVisible = false
			console.log('cc  submit!', this.form)
		}
	},
};
</script>
